<template>
  <div class="clear" style="height: 20px"></div>
  <!-- 橙色背景线 -->
  <div class="navTop">
    <div class="navTopmain">
      <div class="logo">
        <img src="@/assets/images/logo_1.png" />
        <img src="@/assets/images/logo_2.png" />
      </div>
    </div>
  </div>
  <div class="personalBody">
    <div id="base_div" class="perRightcon" v-if="isFirst">
      <div class="JlBoxTit">
        <p class="tit1">基本资料/求职意向</p>
        <div class="tit2"></div>
        <p class="tit3">最高学历</p>
      </div>
      <!-- 基本信息 -->
      <div class="JlBoxCon" style="height: 330px">
        <h1>
          <span>基本信息</span>
          <div></div>
        </h1>
        <div class="clear" style="height: 10px"></div>
        <div class="JlBoxLeft">
          <!-- 基本信息 -->
          <el-form
            :model="information"
            :rules="rules"
            label-width="120px"
            ref="information"
          >
            <el-form-item class="nametxt" label="姓 名" prop="name">
              <el-input v-model="information.name" class="" type="text" />
            </el-form-item>
            <el-form-item class="nametxt" label="性 别" prop="gender">
              <el-radio-group v-model="information.gender">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="nametxt" label="出生年月" prop="birthday">
              <el-col>
                <el-date-picker
                  v-model="information.birthday"
                  type="date"
                  placeholder=""
                  style="width: 250px"
                />
              </el-col>
            </el-form-item>
            <el-form-item class="nametxt" label="现居住地" prop="homeAddress">
              <el-input
                style="width: 380px"
                v-model="information.homeAddress"
                class=""
                type="text"
              />
            </el-form-item>
          </el-form>
          <!-- 用户 -->
          <el-form :model="user" :rules="rules" ref="user" label-width="120px">
            <el-form-item class="nametxt" label="手机号码" prop="phone">
              <el-input v-model="user.phone" class="" type="text" />
            </el-form-item>
            <el-form-item class="nametxt" label="电子邮箱" prop="email">
              <el-input v-model="user.email" class="" type="text" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 求职意向 -->
      <div class="JlBoxCon">
        <h1>
          <span>求职意向</span>
          <div></div>
        </h1>
        <div class="clear" style="height: 10px"></div>
        <div class="JlBoxLeft">
          <!-- 求职意向 -->
          <el-form
            :model="expected"
            :rules="rules"
            ref="expected"
            label-width="120px"
          >
            <el-form-item label="求职状态" prop="workStatus">
              <el-select
                v-model="expected.workStatus"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="离职-随时到岗" :value="0" />
                <el-option label="离职-月内到岗" :value="1" />
                <el-option label="在职-看看机会" :value="2" />
                <el-option label="在职-暂不考虑" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item
              class="nametxt"
              label="相关工作经验"
              prop="experience"
            >
              <el-radio-group v-model="expected.experience">
                <el-radio :label="0">有</el-radio>
                <el-radio :label="1">无</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              class="nametxt"
              label="期望工作性质"
              prop="workNature"
            >
              <el-radio-group v-model="expected.workNature">
                <el-radio :label="0">全职</el-radio>
                <el-radio :label="1">兼职</el-radio>
                <el-radio :label="2">实习</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="期望月薪" prop="expectedSalary">
              <el-select
                v-model="expected.expectedSalary"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="面议" :value="0" />
                <el-option label="5k以下" :value="1" />
                <el-option label="5k-10k" :value="2" />
                <el-option label="10k以上" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="期望工作地点" prop="expectedCity">
              <el-select
                v-model="expected.expectedCity"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="北京" :value="0" />
                <el-option label="上海" :value="1" />
                <el-option label="广州" :value="2" />
                <el-option label="深圳" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="期望职位类别" prop="industryId">
              <el-select
                v-model="expected.industryId"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="互联网" :value="1" />
                <el-option label="零售" :value="2" />
                <el-option label="教育" :value="3" />
                <el-option label="制造业" :value="4" />
                <el-option label="房地产" :value="5" />
                <el-option label="金融业" :value="6" />
                <el-option label="生活服务" :value="7" />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 底部按钮 -->
          <div class="jldiv">
            <button
              class="preBtn"
              style="display: inline-block"
              @click="returnHome"
            >
              返回
            </button>
            <button
              id="next_btn"
              class="nextBtn"
              style="display: inline-block"
              @click="nextDegree"
            >
              进一步完善
            </button>
          </div>
          <div class="clear" style="height: 50px"></div>
        </div>
      </div>
    </div>
    <div id="education_div" class="perRightcon" v-else>
      <div class="JlBoxTit">
        <p class="tit1">基本资料/求职意向</p>
        <div class="tit2"></div>
        <p class="tit4">最高学历</p>
      </div>
      <!-- 最高学历 -->
      <div class="JlBoxCon" style="height: 330px">
        <h1>
          <span>最高学历</span>
          <div></div>
        </h1>
        <div class="clear" style="height: 10px"></div>
        <div class="JlBoxLeft">
          <!-- 最高学历 -->
          <el-form
            :model="degree"
            :rules="rules"
            ref="degree"
            label-width="120px"
          >
            <el-form-item class="nametxt" label="学校名称" prop="school">
              <el-input v-model="degree.school" class="" type="text" />
            </el-form-item>
            <el-form-item
              class="nametxt"
              label="毕业时间"
              prop="graduationTime"
            >
              <el-col>
                <el-date-picker
                  v-model="degree.graduationTime"
                  type="date"
                  placeholder=""
                  style="width: 250px"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
              <el-select
                v-model="degree.degree"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="大专" :value="0" />
                <el-option label="本科" :value="1" />
                <el-option label="硕士" :value="2" />
                <el-option label="博士" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="学历类型" prop="degreeType">
              <el-select
                v-model="degree.degreeType"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="普通高等教育（统招）" :value="0" />
                <el-option label="普通专升本（统招）" :value="1" />
                <el-option label="成人高考" :value="2" />
                <el-option label="自考" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item class="nametxt" label="专业名称" prop="professional">
              <el-input v-model="degree.professional" class="" type="text" />
            </el-form-item>
            <el-form-item label="专业类别" prop="professionalType">
              <el-select
                v-model="degree.professionalType"
                placeholder=""
                style="width: 250px"
              >
                <el-option label="工学" :value="0" />
                <el-option label="哲学" :value="1" />
                <el-option label="经济学" :value="2" />
                <el-option label="医学" :value="3" />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 底部按钮 -->
          <div class="jldiv">
            <button
              class="preBtn"
              style="display: inline-block"
              @click="returnIndex"
            >
              上一步
            </button>
            <button
              id="next_btn"
              class="nextBtn"
              style="display: inline-block"
              @click="complete"
            >
              填写完毕
            </button>
          </div>
          <div class="clear" style="height: 50px"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import {
  showInformation,
  showExpected,
  showDegree,
  createInformation,
  createExpected,
  createDegree,
  editInformation,
  editExpected,
  editDegree,
} from "@/api/personal.js";
import { showUser, editUser} from "@/api/user";
import { ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      //页面切换
      isFirst: true,
      //创建/修改
      isCreate: true,
      //用户表
      user: {
        phone: "",
        email: "",
      },
      //基本信息表
      information: {
        name: "",
        gender: "",
        birthday: "",
        homeAddress: "",
      },
      //求职意向表
      expected: {
        workStatus: "",
        experience: "",
        workNature: "",
        expectedSalary: "",
        expectedCity: "",
        industryId: "",
      },
      //学历表
      degree: {
        school: "",
        graduationTime: "",
        degree: "",
        degreeType: "",
        professional: "",
        professionalType: "",
      },
      rules: {
        //第一页校验规则
        //用户
        phone: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "手机号码为11位",
            trigger: "blur",
          },
        ],
        email: {
          required: true,
          message: "电子邮箱不能为空",
          trigger: "blur",
        },
        //基本信息
        name: {
          required: true,
          message: "姓名不能为空",
          trigger: "blur",
        },
        gender: {
          required: true,
          message: "性别不能为空",
          trigger: "blur",
        },
        birthday: {
          required: true,
          message: "出生年月不能为空",
          trigger: "blur",
        },
        homeAddress: {
          required: true,
          message: "现居住地不能为空",
          trigger: "blur",
        },
        //求职意向
        workStatus: {
          required: true,
          message: "求职状态不能为空",
          trigger: "blur",
        },
        experience: {
          required: true,
          message: "相关工作经验不能为空",
          trigger: "blur",
        },
        workNature: {
          required: true,
          message: "期望工作性质不能为空",
          trigger: "blur",
        },
        expectedSalary: {
          required: true,
          message: "期望月薪不能为空",
          trigger: "blur",
        },
        expectedCity: {
          required: true,
          message: "期望工作地点不能为空",
          trigger: "blur",
        },
        industryId: {
          required: true,
          message: "期望职位类别不能为空",
          trigger: "blur",
        },
        //第二页校验规则
        //学历
        school: {
          required: true,
          message: "学校名称不能为空",
          trigger: "blur",
        },
        graduationTime: {
          required: true,
          message: "毕业时间不能为空",
          trigger: "blur",
        },
        degree: {
          required: true,
          message: "学历不能为空",
          trigger: "blur",
        },
        degreeType: {
          required: true,
          message: "学历类型不能为空",
          trigger: "blur",
        },
        professional: {
          required: true,
          message: "专业名称不能为空",
          trigger: "blur",
        },
        professionalType: {
          required: true,
          message: "专业类别不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    /**
     * 底部按钮
     */
    //返回
    returnHome() {
      router.push({ name: "Home" });
    },
    //进一步完善
    nextDegree() {
      this.$refs.information.validate((valid) => {
        if (valid) {
          this.$refs.user.validate((valid) => {
            if (valid) {
              // 邮箱注册逻辑
              // 检查邮箱格式是否正确
              if (
                this.user.email.match(
                  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                )
              ) {
                this.$refs.expected.validate((valid) => {
                  if (valid) {
                    this.isFirst = false;
                  } else {
                    ElMessageBox.alert("您输入的求职意向不合法", "消息");
                  }
                });
              } else {
                ElMessageBox.alert("您输入的邮箱格式不正确", "消息");
              }
            } else {
              ElMessageBox.alert("您输入的基本信息不合法", "消息");
            }
          });
        } else {
          ElMessageBox.alert("您输入的基本信息不合法", "消息");
        }
      });
    },
    //上一步
    returnIndex() {
      this.isFirst = true;
    },
    //填写完毕
    complete() {
      this.$refs.degree.validate((valid) => {
        if (valid) {
          //修改手机号和邮箱
          editUser(this.user).then((res) => {
            if (res.data.code === 0) {
              if (this.isCreate) {
                // 如果是第一次填写，需要保存基本信息、求职意向、最高学历信息到数据库中
                createInformation(this.information).then(async (res) => {
                  if (res.data.code === 0) {
                    //等待异步方法执行完毕
                    await createExpected(this.expected);
                    await createDegree(this.degree);
                    ElMessageBox.alert("保存成功", "消息");
                    location.reload();
                  } else {
                    ElMessageBox.alert(res.data.message, "消息");
                  }
                });
              } else {
                // 如果不是第一次填写，需要更新基本信息、求职意向、最高学历信息到数据库中
                editInformation(this.information).then(async (res) => {
                  if (res.data.code === 0) {
                    await editExpected(this.expected);
                    await editDegree(this.degree);
                    ElMessageBox.alert("修改成功", "消息");
                  } else {
                    ElMessageBox.alert(res.data.message, "消息");
                  }
                });
              }
            } else {
              ElMessageBox.alert(res.data.message, "消息");
            }
          });
        } else {
          ElMessageBox.alert("您输入的最高学历不合法", "消息");
        }
      });
    },
  },
  mounted() {
    /**
     * 查询用户信息、基本信息、求职意向、最高学历信息
     */
    showUser().then((res) => {
      this.user = res.data.data;
      showInformation().then((res) => {
        //判断查询到的基本信息是否为空，如果不为空，说明是修改
        if (res.data.data != null) {
          this.isCreate = false;
          this.information = res.data.data;
          showExpected().then((res) => {
            if (res.data.code === 0) {
              this.expected = res.data.data;
            } else {
              ElMessageBox.alert(res.data.message, "消息");
            }
          });
          showDegree().then((res) => {
            if (res.data.code === 0) {
              this.degree = res.data.data;
            } else {
              ElMessageBox.alert(res.data.message, "消息");
            }
          });
        }
      });
    });
  },
};
</script>

<style scoped>
/* 引入外部样式 */
@import url("@/assets/css/personal.css");

.el-input {
  --el-input-width: 250px;
  --el-input-height: 34px;
  --el-select-width: 250px;
}
</style>